<template>
	<view class="body">
		<view class="syspadding navbar" :class=" isColor?'navcolor':'' ">
			<view class="top-icon acea-row row-between-wrapper">
				<view class="logo">
					<image class="" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/logo.png"></image>
				</view>
				<view class="search acea-row row-middle">
					<image class="sousuo" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/sousuo.png" mode="aspectFit"></image>
					<text>搜一搜</text>
				</view>
				<view>
					<image class="saoma" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/saoma.png" mode="aspectFit"></image>
				</view>
				<view>
					<image class="saoma" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/xinxi.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="swiper-nav">
			<swiper class="swiper" :autoplay="true"  :interval="3000" :duration="1000" @change="getCurrents">
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item class="swiper-item">
						<image :src="item"></image>
					</swiper-item>
				</block>
			</swiper>
			<view class="dots-box acea-row row-middle">
				<block v-for="(item,indexv) in banner" :key="indexv">
					<view :class=" current == indexv ? 'on':'off'"></view>
				</block>
			</view>
		</view>
		
		<view class="btn-tab acea-row row-middle row-between-wrapper">
			<view class="btn-item acea-row row-middle row-center row-column">
				<view class="icon">
					<image src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/woyaobanshui.png"></image>
				</view>
				<view class="title">我要办税</view>
			</view>
			<view class="btn-item acea-row row-middle row-center row-column" @click="golink()">
				<view class="icon">
					<image src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/woyaochaxun.png" mode=""></image>
				</view>
				<view class="title">我要查询</view>
			</view>
			<view class="btn-item acea-row row-middle row-center row-column">
				<view class="icon">
					<image src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/gongzhongfuwu.png"></image>
				</view>
				<view class="title">公众服务</view>
			</view>
		</view>
		
		<view class="messages-nav acea-row row-middle">
			<view class="ling">
				<image src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/tongzhi.png"></image>
			</view>
			<swiper class="mes-swiper"  :vertical="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="swiper-item">
					<view>个税年度汇算退补税五问答</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view>未依法汇算请关注，未补税款有后果</view>
				</swiper-item>
			</swiper>
			<view class="icon-rigth acea-row row-middle">
				<text class="iconfont icon-xiangyou"></text>
			</view>
		</view>
		
		<view class="zhaunti">
			<view class="acea-row row-middle">
				<view class="icon">
					<image src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/redian.png"></image>
				</view>
				<view class="title">热点专题</view>
			</view>
			<view class="pictrue">
				<swiper class="hotswiper" indicator-active-color="#ffffff" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<block v-for="(item,index) in hotsimg" :key="">
						<swiper-item class="hots-img">
							<image :src="item"></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
		
		<view class="fill-ash"></view>
		
		<view class="business-today">	
			<view class="acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<view class="changyong">
						<image src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/changyong.png"></image>
					</view>
					<view class="yewu">常用业务</view>
				</view>
				<view class="acea-row row-middle">
					<view class="guanli">管理</view>
					<view class="iconfotn icon-xiangyou fc-888"></view>
				</view>
			</view>
			
			<view class="item bga acea-row row-right">
				<view class="white acea-row row-between-wrapper">
					<view class="text">
						<view class="bold">综合所得年度汇算</view>
						<view class="fc-999 fs-26 mt-10">居民个人综合所得年度汇算申报（仅取得境内综合所得适用）</view>
					</view>
					<view class="iconfont icon-xiangyou fc-999"></view>
				</view>
			</view>
			
			<view class="item bgb acea-row row-right">
				<view class="white acea-row row-between-wrapper">
					<view class="text">
						<view class="bold">专项附加扣除填报</view>
						<view class="fc-999 fs-26 mt-10">子女教育、继续教育等赚项附加扣除的填报</view>
					</view>
					<view class="iconfont icon-xiangyou fc-999"></view>
				</view>
			</view>
			
			<view class="item bgc acea-row row-right">
				<view class="white acea-row row-between-wrapper">
					<view class="text">
						<view class="bold">收入纳税明细查询</view>
						<view class="fc-999 fs-26 mt-10">已申报收入的查询及异议申诉</view>
					</view>
					<view class="iconfont icon-xiangyou fc-999"></view>
				</view>
			</view>
			
			<view class="item bgd acea-row row-right"  @click="pathClick('/pages/index/bill-Issue')">
				<view class="white acea-row row-between-wrapper">
					<view class="text">
						<view class="bold">税收记录开具</view>
						<view class="fc-999 fs-26 mt-10">申请开具纳税记录</view>
					</view>
					<view class="iconfont icon-xiangyou fc-999"></view>
				</view>
			</view>
			
		</view>	
		
		<view class="hots-mes">
			<view class="acea-row row-between-wrapper">
				<view class="acea-row row-middle">
					<view class="redainwenti">
						<image src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/redainwenti.png"></image>
					</view>
					<view class="bold fs-30">热点问题</view>
				</view>
				<view>
					<text class="fc-888">查看更多</text>
					<text class="iconfont icon-xiangyou fc-999"></text>
				</view>
			</view>
			<view>
				<view class="acea-row row-middle item">
					<view class="circle"></view>
					<view class="title line1">哪些人需要办理2022年度个人所得税综合所得税申请</view>
				</view>
				<view class="acea-row row-middle item">
					<view class="circle"></view>
					<view class="title line1">纳税人应在什么时间办理2022年度个人所得税申请</view>
				</view>
				<view class="acea-row row-middle item"> 
					<view class="circle"></view>
					<view class="title line1">纳税人可通过什么渠道办理2022年度个人所得税申请</view>
				</view>
			</view>
		</view>
		
		<view class="acea-row row-between-wrapper bottom-nav">
			<view>
				<view class="tongzhigonggao">
					<image class="imgwh" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/tongzhigonggao.png" mode=""></image>
				</view>
				<view class="tongzhigonggao" style="margin-top: 20rpx;">
					<image class="imgwh" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/jiedu.png" mode=""></image>
				</view>
			</view>
			<view class="bangzhu">
				<image class="imgwh" src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/bangzhu.png"></image>
			</view>
		</view>
		
		<view class="bottomicon acea-row row-center">
			<image src="https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/bottomicon.png"></image>
		</view>
		
		<view style="width: 100%;height: 100rpx;"></view>

		<!-- #ifdef APP-PLUS -->
		<app-update v-if="!privacyStatus" ref="appUpdate" :force="true" :tabbar="false"></app-update>
		<view class="privacy-wrapper" v-if="privacyStatus">
			<view class="privacy-box">
				<view class="title">{{$t(`服务协议与隐私政策`)}}</view>
				<view class="content">
					{{$t(`请务必审慎阅读、充分理解“服务协议与 隐私政策”各条款，包括但不限于：为了 向你提供即时通讯、内容分享等服务，我 们需要收集你的设备信息、操作日志等个 人信息。你可以在“设置”中查看、变更、删除个人信息并管理你的授权。`)}}<br>
					{{$t(`你可以阅读`)}}
					<navigator url="/pages/users/privacy/index?type=3">{{$t(`《服务协议与隐私政策》`)}}</navigator>
					{{$t(`了解详细信息。如你同意，请点击“我同意”开始接受我们的服务。`)}}
				</view>
				<view class="btn-box">
					<view class="btn-item" @click="confirmApp">{{$t(`我同意`)}}</view>
					<view class="btn" @click="closeModel">{{$t(`残忍拒绝`)}}</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<tabbar :url="'/pages/index/index'"></tabbar>
		<!-- <pageFoot></pageFoot> -->
	</view>
</template>

<script>     
	const app = getApp();
	import appUpdate from "@/components/update/app-update.vue";
	import pageFoot from '@/components/pageFooter/index.vue';
	import tabbar from '@/components/tabbar.vue'
	export default {
		components:{
			appUpdate,
			pageFoot,
			tabbar
		},
		props:{
			isColor:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				privacyStatus: false, // 隐私政策是否同意过
				current:0,
				banner:[
					'https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/banner001.png',
					'https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/banner002.png',
					'https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/banner003.png',
					'https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/banner004.png',
					'https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/banner005.png',
					'https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/banner006.png',
				],
				hotsimg:[
					'https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/1.png',
					'https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/2.png',
					// 'https://gerensuodeshui.oss-cn-hangzhou.aliyuncs.com/3.png',
				],
				
			};
		},
		methods:{
			pathClick(url){
				uni.navigateTo({
					url: url
				})
			},
			golink(){
				uni.navigateTo({
					url:'/pages/index/query'
				})
			},
			
			getCurrents(e){
				this.current = e.detail.current;
			},
			
			// #ifdef APP-PLUS
			// 同意隐私协议
			confirmApp() {
				uni.setStorageSync('privacyStatus', true)
				this.privacyStatus = false
			},
			// 关闭Model
			closeModel() {
				//退出app
				uni.getSystemInfo({
					success: function(res) { // 判断为安卓的手机 
						if (res.platform == 'android') { // 安卓退出app      
							plus.runtime.quit();
						} else { // 判断为ios的手机，退出App      
							plus.ios.import("UIApplication").sharedApplication().performSelector("exit");
			
						}
					}
				})
			},
			// #endif
			
			
		},
		onPageScroll(res) {
			uni.$emit('scroll');
			console.log(res.scrollTop)
		},
	}
</script>

<style lang="scss" scoped>
	page{ background-color: #ffffff !important; }
	
	.bold{
		font-weight: bold;
	}
	.fc-999{
		color: #999;
	}
	.fc-888{
		color: #888;
	}
	.fs-24{
		font-size: 24rpx;
	}
	.fs-30{
		font-size: 30rpx;
	}
	.fs-26{
		font-size: 26rpx;
	}
	.mt-10{
		margin-top: 10rpx;
	}
	.imgwh{
		width: 100%;
		height: 100%;
	}
	
	.bottom-nav{
		padding: 30rpx;
		margin-top: 30rpx;
		
		.tongzhigonggao{
			width: 335rpx;
			height: 140rpx;
		}
		
		.bangzhu{
			width: 335rpx;
			height: 300rpx;
		}
		
	}

	
	.hots-mes{
		width: 690rpx;
		height: 300rpx;
		box-shadow: 0 0 10rpx #f2f2f2;
		margin: 20rpx auto 0 auto;
		padding: 30rpx;
		border-radius: 15rpx;
		overflow: hidden;
		
		.redainwenti{
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.item{
			margin-top: 30rpx;
			
			.circle{
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #9D9BA5;
			}
			.title{
				width: 580rpx;
				margin-left: 10rpx;
				color: #666;
				font-size: 26rpx;
				letter-spacing: 2rpx;
			}
		}
			
	}
	
	.business-today{
		width: 100%;
		padding: 30rpx;
		
		.changyong{
			width: 39rpx;
			height: 40rpx;
			margin-right: 20rpx;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.yewu{
			font-weight: bold;
			font-size: 30rpx;
		}
		
		.guanli{
			color: #999;
			font-size: 28rpx;
		}
		
		.item{
			width: 690rpx;
			height: 180rpx;
			border-radius: 10rpx;
			overflow: hidden;
			box-shadow: 0 0 10rpx #f2f2f2;
			margin-top: 30rpx;
			
			&.bga{
				background-image: linear-gradient(to right,#F66D9B,#ffffff,#ffffff,#ffffff,#ffffff);
			}
			&.bgb{
				background-image: linear-gradient(to right,#51DE9C,#ffffff,#ffffff,#ffffff,#ffffff);
			}
			&.bgc{
				background-image: linear-gradient(to right,#A092E6,#ffffff,#ffffff,#ffffff,#ffffff);
			}
			&.bgd{
				background-image: linear-gradient(to right,#FBC580,#ffffff,#ffffff,#ffffff,#ffffff);
			}
			
			.white{
				width: 686rpx;
				height: 100%;
				background-color: #ffffff;
				border-radius: 10rpx 0 0 10rpx;
				padding: 30rpx;
				
				.text{
					width: 560rpx;
				}
				
			}
		}
	}
	
	.fill-ash{
		width: 100vw;
		height: 20rpx;
		background-color: #f5f5f5;
	}
	
	.pictrue{
		width: 100%;
		height: 320rpx;
		// border: 1px solid red;
		margin-top: 30rpx;
		border-radius: 15rpx;
		overflow: hidden;
			
		.hotswiper,.hots-img{
			width: 100%;
			height: 100%;
	
			 image{
				 width: 100%;
				 height: 100%;
			 }
		}
	}
	
	.zhaunti{
		width: 690rpx;
		margin: 30rpx auto;
		
		.title{
			font-size: 30rpx;
			font-weight: bold;
		}
		
		.icon{
			width: 37rpx;
			height: 48rpx;
			margin-right: 20rpx;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.messages-nav{
		width: 690rpx;
		height: 70rpx;
		border-radius: 50rpx;
		background-color: #FEF7DA;
		color: #F2990A;
		margin: 50rpx auto;
		
		.mes-swiper{
			width: 550rpx;
			height: 100%;
			color: #F2990A;
			line-height: 70rpx;
			font-size: 24rpx;
			
			.swiper-item{
				width: 100%;
				height: 100%;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.ling{
			width: 45rpx;
			height: 45rpx;
			margin: 0 10rpx 0 20rpx;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.icon-rigth{
			width: 60rpx;
			height: 60rpx;
		}
	}
	
	
	.btn-tab{
		width: 690rpx;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin: -72rpx auto 0 auto;
		z-index: 999;
		position: relative;
		box-shadow: 0 0 15rpx rgba(0,0,0,.2);
		
		.btn-item{
			width: 33%;
			height: 100%;
			
			.icon{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			.title{
				margin-top: 10rpx;
				font-size: 26rpx;
			}
		}
	}
	
	.navbar{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 9999;
		
		&.navcolor{
			background-image: linear-gradient(to right,#0562ED,#1B6EF0,#367DF3,#4286F5);
		}
		
		.top-icon{
			width: 100%;
			height: 100rpx;
			padding: 0 30rpx;
			
			.logo{
				width: 200rpx;
				height: 52rpx;
				background-size: 100% 100%;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			
			.search{
				width: 300rpx;
				height: 60rpx;
				background-color: rgba(255, 255, 255, 0.5);
				// opacity: 0.3;
				border-radius: 40rpx;
				margin-left: 20rpx;
				color: #fff;
				font-size: 26rpx;
				padding: 0 20rpx;
				
				.sousuo{
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
			
			.saoma{
				width: 40rpx;
				height: 40rpx;
			}
		}
		
	}
	
	.swiper-nav{
		width: 100%;
		height: 550rpx;
		position: relative;
		overflow: hidden;
		
		.swiper{
			width: 100%;
			height: 100%;
			overflow: hidden;
			// border-radius: 0 0 100% 100% / 0 0 10% 10%;
			
			.swiper-item{
				width: 100%;
				height: 100%;
				color: #fff;
				line-height: 350rpx;
				text-align: center;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		
		
		.dots-box{
			height: 30rpx;
			position: absolute;
			bottom: 100rpx;
			left: 30rpx;
			
			.off{
				width: 12rpx;
				height: 12rpx;
				border-radius: 12rpx;
				margin-left: 10rpx;
				background-color: rgba(0,0,0,.3);
			}
			
			.on{
				width: 25rpx;
				height: 12rpx;
				background-color: #ffffff;
				margin-left: 10rpx;
				border-radius: 10rpx;
			}
			
		}
		
	}
	
	// .swiper-nav::after{
	// 	width: 180%;
	// 	  height: 550rpx;
	// 	  overflow: hidden;
	// 	    position: absolute;
	// 	    left: -40%;
	// 	    top: 0;
	// 	    // z-index: 0;
	// 	    content: '';
	// 	    border-radius: 0 0 50% 50%;
	// 		background-color: #0562ED;
	// }
	
	.bottomicon{
		height: 100rpx;
		margin: 60rpx auto;
		
		image{
			height: 100%;
		}
	}
	
	.privacy-wrapper {
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #7F7F7F;

		.privacy-box {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 560rpx;
			padding: 50rpx 45rpx 0;
			background: #fff;
			border-radius: 20rpx;

			.title {
				text-align: center;
				font-size: 32rpx;
				text-align: center;
				color: #333;
				font-weight: 700;
			}

			.content {
				margin-top: 20rpx;
				line-height: 1.5;
				font-size: 26rpx;
				color: #666;

				navigator {
					display: inline-block;
					color: #E93323;
				}
			}

			.btn-box {
				margin-top: 40rpx;
				text-align: center;
				font-size: 30rpx;

				.btn-item {
					height: 82rpx;
					line-height: 82rpx;
					background: linear-gradient(90deg, #F67A38 0%, #F11B09 100%);
					color: #fff;
					border-radius: 41rpx;
				}

				.btn {
					padding: 30rpx 0;
				}
			}
		}
	}
</style>
